<template>
  <div v-loading.fullscreen="loading">
    <el-row :gutter="10">
      <el-col
        :span="1"
        style="text-align:left"
      >
        <el-button
          type="success"
          @click="addBtnClick"
        >添加</el-button>
      </el-col>

    </el-row>

    <el-row
      class="marginTop10"
      :gutter="10"
    >
      <el-col
        :span="4"
        style="text-align:left"
      >
        <el-input
          v-model="tableDatas.filters.userid"
          clearable
        >
          <template #prepend>工号:</template>
        </el-input>
      </el-col>

      <el-col
        :span="4"
        style="text-align:left"
      >
        <el-input
          v-model="tableDatas.filters.username"
          clearable
        >
          <template #prepend>姓名:</template>
        </el-input>
      </el-col>

      <el-col
        :span="4"
        style="text-align:left"
      >
        <el-select
          v-model="tableDatas.filters.type"
          clearable
          placeholder="类型"
        >
          <el-option
            label="内部审批人"
            value="1"
          />
          <el-option
            label="外部审批人"
            value="11"
          />
        </el-select>
      </el-col>

      <el-col
        :span="4"
        style="text-align:left"
      >
        <el-input
          v-model="tableDatas.filters.depart"
          clearable
        >
          <template #prepend>三级部门:</template>
        </el-input>
      </el-col>

    </el-row>

    <el-dialog
      v-model="dialogDatas.dialogFormVisible"
      :title="dialogDatas.isNew ? '添加':'修改'"
      top="5vh"
    >
      <el-scrollbar max-height="70vh">
        <el-form :model="dialogDatas.currentData">
          <el-form-item
            v-for="item in dialogDatas.formItems"
            :label="item.label"
          >
            <el-date-picker
              v-if="item.isDate"
              v-model="dialogDatas.currentData[item.value]"
              :type="item.dateOption ? item.dateOption.type : 'date'"
              :format="item.dateOption ? item.dateOption.format : 'YYYY/MM/DD'"
              :value-format="item.dateOption ? item.dateOption.valueFormat : 'YYYY/MM/DD'"
              :date-format="item.dateOption ? item.dateOption.dateFormat : ''"
              :time-format="item.dateOption ? item.dateOption.timeFormat : ''"
            />
            <el-switch
              v-else-if="item.isSwitch"
              v-model="dialogDatas.currentData[item.value]"
              active-text="访客审批人"
              inactive-text="内部审批人"
              :active-value="item.trueValue"
              :inactive-value="item.falseValue"
              size="large"
            />

            <el-radio-group
              v-else-if="item.isRadio"
              v-model="dialogDatas.currentData[item.value]"
            >
              <el-radio
                v-for="radio in item.radioOptions"
                :value="radio.value"
                :label="radio.label"
              >
              </el-radio>
            </el-radio-group>

            <el-input
              v-else
              v-model="dialogDatas.currentData[item.value]"
              :disabled="item.disable"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>

      <template #footer>
        <span>
          <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogDatas.confirmBtnClick"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table
      class="marginTop10"
      :data="tableDatas.tableDatasAfterPage"
      stripe
      border
      empty-text="无数据"
    >
      <el-table-column
        v-for="column in tableDatas.tableColumns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >

        <template
          #default="scope"
          v-if="column.prop =='operate'"
        >
          <div>
            <el-button
              type="success"
              @click="tableDatas.editBtnClick(scope.row)"
            >修改</el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="确定删除该条记录?"
              @confirm="tableDatas.deleteBtnClick(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>

        <template
          #default="scope"
          v-if="column.prop =='TYPE'"
        >
          <div>
            <el-tag
              v-if="scope.row.TYPE == '1'"
              type="primary"
              size="large"
            >内部审批人</el-tag>
            <!-- <el-tag
              v-if="scope.row.TYPE == '2'"
              type="success"
              size="large"
            >内部二级审批人</el-tag> -->
            <el-tag
              v-if="scope.row.TYPE == '11'"
              type="info"
              size="large"
            >外部审批人</el-tag>
          </div>
        </template>

      </el-table-column>
    </el-table>

    <el-pagination
      class="marginTop10"
      @size-change="tableDatas.filters.handleSizeChange"
      @current-change="tableDatas.filters.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.filters.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination>

  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';
import myAxios from '@/myAxios/myAxios';
import { showWarning } from '@/hooks/useMyMessageBox';
import { v4 } from 'uuid';
import store from '@/store';
import VueCookie from 'vue-cookie';
import { dayjs } from 'element-plus';

export default {
  name: 'SpPersonMaintain',
  setup () {
    let loading = ref(false);
    let addBtnClick = function () {
      showFormDialog();
    };

    let showFormDialog = function (row) {
      if (row) {
        dialogDatas.isNew = false;
        dialogDatas.currentData = { ...row };
      }
      else {
        dialogDatas.isNew = true;
        dialogDatas.currentData = {
          QD_VISITOR_SP_ID: v4(),
          TYPE: '1',
          CREATOR: VueCookie.get('userid') + ';' + dayjs().format('YYYY/MM/DD HH:mm:ss'),
        };
      }
      dialogDatas.dialogFormVisible = true;
    };

    let dialogDatas = reactive({
      dialogFormVisible: false,
      currentData: {},
      isNew: false,
      formItems: [
        // {
        //   "value": "QD_VISITOR_SP_ID",
        //   "label": "ID",
        //   "isDate": false,
        // },
        {
          "value": "USERID",
          "label": "工号",
          "isDate": false,
        },
        {
          "value": "USERNAME",
          "label": "姓名",
          "isDate": false,
        },
        {
          "value": "TYPE",
          "label": "类型",
          "isDate": false,
          "isRadio": true,
          "radioOptions": [
            // { value: '11', label: '外部审批' },
            { value: '1', label: '内部审批' },
            // { value: '2', label: '内部二级审批' },
          ],
        },
        {
          "value": "DEPART",
          "label": "二级部门",
          "isDate": false,
        },
        {
          "value": "DEPART1",
          "label": "三级部门",
          "isDate": false,
        },
        {
          "value": "CREATOR",
          "label": "创建人",
          "isDate": false,
          "disable": true,
        },
        {
          "value": "DATA1",
          "label": "二级审批人工号",
          "isDate": false,
        },
        {
          "value": "DATA2",
          "label": "二级审批人姓名",
          "isDate": false,
        },
        // {
        //   "value": "DATA3",
        //   "label": "DATA3",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA4",
        //   "label": "DATA4",
        //   "isDate": false,
        // },
      ],
      checkCurrentData: function () {
        let userid = dialogDatas.currentData.USERID ? dialogDatas.currentData.USERID : '';
        if (!userid) {
          showWarning('申请人工号不能为空');
          return false;
        }
        return true;
      },
      confirmBtnClick: function () {
        let isPassCheck = dialogDatas.checkCurrentData();
        if (!isPassCheck) {
          return;
        }

        loading.value = true;
        // (SELECT '{0}' AS QD_VISITOR_SP_ID,
        //       '{1}' AS USERID,
        //       '{2}' AS USERNAME,
        //       '{3}' AS TYPE,
        //       '{4}' AS DEPART,
        //       '{5}' AS CREATOR
        //  FROM DUAL)
        let qd_visitor_sp_id = dialogDatas.currentData.QD_VISITOR_SP_ID;
        let userid = dialogDatas.currentData.USERID;
        let username = dialogDatas.currentData.USERNAME;
        let type = dialogDatas.currentData.TYPE;
        let depart = dialogDatas.currentData.DEPART;
        let creator = dialogDatas.currentData.CREATOR;

        let depart1 = dialogDatas.currentData.DEPART1;
        let data1 = dialogDatas.currentData.DATA1;
        let data2 = dialogDatas.currentData.DATA2;
        let data3 = dialogDatas.currentData.DATA3;
        let data4 = dialogDatas.currentData.DATA4;


        let params = `${qd_visitor_sp_id}\t${userid}\t${username}` +
          `\t${type}\t${depart}\t${creator}` +
          `\t${depart1}\t${data1}\t${data2}` +
          `\t${data3}\t${data4}`;

        myAxios.post('陈帅廷添加或修改驱动访客系统审批人', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '提交成功!' + res
            });
            getTableDatas();
          }
          else {
            loading.value = false;
            showWarning('更新失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('更新失败err!' + err);
        });

      },
      cancelBtnClick: function () {

      }
    });

    let getTableDatas = function () {
      loading.value = true;

      let params = ``;
      myAxios.get('陈帅廷查询驱动访客系统审批人', params).then(res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oritableData = [...res];

          store.state.spList.length = 0;
          store.state.spList.push(...res);

          // ElMessage({
          //   showClose: true,
          //   type: 'success',
          //   message: '最新数据获取成功!'
          // });
        }
        else {
          loading.value = false;
          showWarning('获取数据失败res!' + res);
        }
      }).catch((err) => {
        loading.value = false;
        showWarning('获取数据失败err!' + err);
      });
    };

    onMounted(() => {
      getTableDatas();
    });

    let tableDatas = reactive({
      //表格筛选展示相关代码
      filters: {
        userid: '',
        username: '',
        type: '',
        depart: '',

        //表格翻页相关代码
        currentPage: 1,
        pagesize: 10,
        handleSizeChange (val) {
          tableDatas.filters.pagesize = val;
        },
        handleCurrentChange (val) {
          tableDatas.filters.currentPage = val;
        },
      },
      tableDatasAfterFilter: computed(() => {
        let fData = tableDatas.oritableData;

        if (tableDatas.filters.userid) {
          fData = fData.filter(item => {
            return item.USERID.includes(tableDatas.filters.userid);
          });
        }
        if (tableDatas.filters.username) {
          fData = fData.filter(item => {
            return item.USERNAME.includes(tableDatas.filters.username);
          });
        }
        if (tableDatas.filters.type) {
          fData = fData.filter(item => {
            return item.TYPE == tableDatas.filters.type;
          });
        }
        if (tableDatas.filters.depart) {
          fData = fData.filter(item => {
            return item.DEPART1 && item.DEPART1.includes(tableDatas.filters.depart);
          });
        }

        return fData;
      }),
      tableDatasAfterPage: computed(() => {
        let fData = tableDatas.tableDatasAfterFilter;
        fData = fData.slice((tableDatas.filters.currentPage - 1) * tableDatas.filters.pagesize, tableDatas.filters.currentPage * tableDatas.filters.pagesize);
        return fData;
      }),

      tableColumns: [
        // {
        //   "prop": "QD_VISITOR_SP_ID",
        //   "label": "ID",
        //   "align": "center",
        // },
        {
          "prop": "USERID",
          "label": "工号",
          "align": "center",
        },
        {
          "prop": "USERNAME",
          "label": "姓名",
          "align": "center",
        },
        {
          "prop": "TYPE",
          "label": "类型",
          "align": "center",
        },
        {
          "prop": "DEPART",
          "label": "二级部门",
          "align": "center",
        },
        {
          "prop": "DEPART1",
          "label": "三级部门",
          "align": "center",
        },
        {
          "prop": "CREATOR",
          "label": "创建人",
          "align": "center",
        },
        // {
        //   "prop": "DATA1",
        //   "label": "DATA1",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA2",
        //   "label": "DATA2",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA3",
        //   "label": "DATA3",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA4",
        //   "label": "DATA4",
        //   "align": "center",
        // },
        {
          "prop": "operate",
          "label": "操作",
          "align": "center",
          "width": 170,
        },
      ],
      oritableData: [],
      editBtnClick: function (row) {
        showFormDialog(row);
      },
      deleteBtnClick: function (row) {
        loading.value = true;

        let params = `${row.QD_VISITOR_SP_ID}`;
        myAxios.post('陈帅廷删除驱动访客系统审批人', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '删除成功!' + res
            });
            tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1);
          }
          else {
            loading.value = false;
            showWarning('删除失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('删除失败err!' + err);
        });

      },
    });

    return {
      loading,
      addBtnClick,
      dialogDatas,
      tableDatas
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
</style>

